<script setup>
import {Plus, Search, Delete} from '@element-plus/icons-vue'
import json from './moduleJson.js'
import dataJson from './dataJson.js'
import { Refresh} from '@element-plus/icons-vue'
import {inject} from "vue";
import AuthorityBtn from "@/components/AuthorityBtn.vue";

const t = inject('$t')

const props = defineProps({
    // 页面所有组件配置
    module: {
        type: Object,
        default: () => {
            return json
        }
    },
    // 列表数据
    data: {
        type: Object,
        default: () => {
            return dataJson
        }
    },
})
let ty = 0;
const emits = defineEmits([
    'pageSizeChange',// 页数改变事件
    'pageCurrentChange',// 页码改变事件
    'editCancel',// 取消编辑、添加、详情事件
    'editConfirm',// 确认编辑、添加、详情事件
    'editOpen',// 添加事件、编辑、详情
    'searchOpen',// 搜索事件
    'delConfirm',// 删除确认事件
    'delCancel',// 删除取消事件
    'searchCancel', // 搜索取消
    'searchConfirm', // 搜索确认
    'refresh' // 刷新事件
])
const pageSizeChange = (data) => {
    emits('pageSizeChange', data)
}
const pageCurrentChange = (data) => {
    emits('pageCurrentChange', data)
}
const editCancel = () => {
    emits('editCancel')
    props.module.dialog.show = false
}
const editConfirm = () => {
    emits('editConfirm', ty)
}
/**
 * 添加 编辑 详情 使用的弹框
 * @param data 数据
 * @param index 数据的下标位置
 * @param type 0 添加 1 编辑 2 详情
 */
const editOpen = (data, index, type) => {
    let title = {0: t('btn.add'),1: t('btn.edit'),2: t('btn.info')}
    ty = type
    props.module.dialog.title = title[type]
    emits('editOpen', JSON.parse(JSON.stringify(data)), index, type)
    props.module.dialog.show = true
}
const delConfirm = (data, index) => {
    emits('delConfirm', JSON.parse(JSON.stringify(data)), index)
}
const delCancel = (data, index) => {
    emits('delCancel', JSON.parse(JSON.stringify(data)), index)
}
const searchOpen = () => {
    props.module.search.show = true
    emits('searchOpen')
}
const searchCancel = () => {
    emits('searchCancel')
    props.module.search.show = false
}
const searchConfirm = () => {
    emits('searchConfirm')
    props.module.search.show = false
}
const onRefresh = () => {
    emits('refresh')
}


</script>
<template>
    <el-row class="main-row" >
        <!-- 左边 -->
        <el-row :style="'min-width: '+module.layout.width" v-if="module.layout.tableLeft">
            <el-row class="main-row-tableLeft">
                <slot name="table-left"></slot>
            </el-row>
        </el-row>
        <!-- 右边 -->
        <el-row :style="'min-width:calc(100% - '+module.layout.width+')'">
            <!-- 按钮 -->
            <el-row style="width: 100%;height: 60px">
                <el-row class="main-row-operate">
                    <AuthorityBtn :path="module.operations.addPath">
                        <el-button type="primary" :icon="Plus" @click="editOpen(null,null,0)">
                            {{ $t('btn.add') }}
                        </el-button>
                    </AuthorityBtn>
                    <el-button type="primary" style="margin-left: 12px" :icon="Refresh" @click="onRefresh">{{$t('btn.refresh')}}</el-button>
                    <slot name="operate-before"></slot>
                    <div class="flex-grow"/>
                    <AuthorityBtn :path="module.operations.searchPath">
                        <el-button :icon="Search" @click="searchOpen"></el-button>
                    </AuthorityBtn>
                    <slot name="operate-after"></slot>
                </el-row>
            </el-row>

            <el-row v-if="!module.layout.table" class="main-table-row">
                <el-row class="main-table-row-slot">
                    <slot name="table"></slot>
                </el-row>
            </el-row>

            <el-row v-if="module.layout.table" class="main-table-row">
                <!-- 表格 -->
                <el-table ref="table" row-key="id" border :data="data.list"
                          v-loading="data.load"
                          :class="module.page.show?'main-table':'main-table-page'" class="main-table">
                    <!-- 数据列 -->
                    <slot name="table-column"></slot>
                    <!-- 操作按钮 -->
                    <el-table-column v-if="module.operations.show" fixed="right" :label="$t('btn.operations')"
                                     :width="module.operations.width">
                        <template #default="scope">
                            <slot name="table-event" :data="scope.row" :index="scope.$index"/>
                            <AuthorityBtn :path="module.operations.infoPath">
                                <el-button type="primary" @click="editOpen(scope.row,scope.$index,2)">
                                    {{ $t('btn.info') }}
                                </el-button>
                            </AuthorityBtn>
                            <AuthorityBtn :path="module.operations.editPath">
                                <el-button type="primary" @click="editOpen(scope.row,scope.$index,1)">
                                    {{ $t('btn.edit') }}
                                </el-button>
                            </AuthorityBtn>
                            <AuthorityBtn :path="module.operations.delPath">
                                <el-popconfirm
                                    :title="$t('btn.delMsg')"
                                    @confirm="delConfirm(scope.row,scope.$index)"
                                    @cancel="delCancel(scope.row,scope.$index)"
                                >
                                    <template #reference>
                                        <el-button type="danger">{{ $t('btn.del') }}</el-button>
                                    </template>
                                </el-popconfirm>
                            </AuthorityBtn>
                            <slot name="after-table-event" :data="scope.row" :index="scope.$index" />
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-row class="main-row-page" v-if="module.page.show">
                    <el-pagination
                        v-model:currentPage="data.current"
                        v-model:page-size="data.size"
                        :page-sizes="[30, 50, 100, 200]"
                        :small="false"
                        :disabled="false"
                        :background="true"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="data.total"
                        @size-change="pageSizeChange"
                        @current-change="pageCurrentChange"
                    />
                </el-row>
            </el-row>

        </el-row>

    </el-row>


    <!-- 添加\编辑\详情 -->
    <Dialog
        :dialog="Object.assign(module.dialog,{frame:false,width:'50%',title: $t('btn.add') })"
        @close="editCancel">
        <el-row class="main-row-dialog">
            <slot name="table-dialog"></slot>
        </el-row>
        <template #table-dialog-btn>
            <el-button v-if="module.dialog.cancelBtn" @click="editCancel">{{ $t('btn.cancel') }}</el-button>
            <el-button v-if="module.dialog.confirmBtn" type="primary" @click="editConfirm">{{ $t('btn.confirm') }}</el-button>
        </template>
    </Dialog>

    <!-- 搜索 -->
    <Dialog :dialog="Object.assign(module.search,{frame:false,title: $t('btn.searchTitle'),width:'50%'})"
            @close="searchCancel">
        <el-row class="main-row-dialog">
            <slot name="table-search"></slot>
        </el-row>
        <template #table-dialog-btn>
        <span class="dialog-footer">
          <el-button v-if="module.search.cancelBtn" @click="searchCancel">{{ $t('btn.cancel') }}</el-button>
          <el-button v-if="module.search.confirmBtn" type="primary"
                     @click="searchConfirm">{{ $t('btn.search') }}</el-button>
          <slot name="table-search-btn"></slot>
        </span>
        </template>
    </Dialog>

</template>

<style lang="scss" scoped>
.main-row {
    width: 100%;
    height: 100%;
    padding: 20px;
    overflow-y: hidden;
    display: flex;
    flex-wrap: nowrap;

    .main-row-tableLeft {
        min-width: calc(100% - 20px);
        height: 100%;
        margin-right: 20px;
        border-radius: 5px;
        border: 1px solid var(--el-menu-border-color);
        overflow: auto;
        padding: 5px;
        flex-wrap: wrap;
        flex-flow: column;
    }

    .main-table, .main-table-page {
        width: 100%;
        margin-top: 5px;
    }

    .main-table {
        height: calc(100vh - 45px - 3 * 60px);
    }

    .main-table-page {
        height: calc(100vh - 45px - 2 * 60px);
    }
    .main-table-row{
        width: 100%;
        height: calc(100% - 60px);
        display: flex;
        flex-flow: column;
    }

    .main-table-row-slot{
        width: 100%;
        height: 100%;
        margin-top: 5px;
        display: flex;
        flex-flow: column;
    }

    .main-row-operate {
        height: 60px;
        width: 100%;
        align-items: center;
        padding: 0 10px 0 10px;
        background-color: var(--el-menu-bg-color);
        border-bottom: solid 1px var(--el-menu-border-color);
    }

    .main-row-page {
        height: 60px;
        width: 100%;
        align-items: center;
        justify-content: center;
        background-color: var(--el-menu-bg-color);
    }

    :deep(.main-row-dialog) {
        min-height: auto;
        max-height: calc(100vh / 2);
        overflow-y: auto;
        width: 100%;
    }

    :deep(.main-row-dialog .el-form) {
        width: 100%;
    }

    :deep(.el-scrollbar__view) {
        width: 100%;
        height: 100%;
    }
}
</style>
